<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Hello, World</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1564656_rv2uwqj1qn9.css">
  <style type="text/css">
    html {
      width: 100%;
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    .container {
      width: 70%;
      height: 100%;
      margin: 0 auto;
      border: 1px solid #000;
    }

    .btn-group {
      float: right;
      width: 30%;
      box-sizing: border-box;
      border: 1px solid #000;
    }

    .btn-item {
      width: 100%;
      cursor: pointer;
      border: 1px solid #000;
    }

    .icon-icon_location {}

    .map-box {
      width: 70%;
      height: 100%;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #000;
      box-sizing: border-box;
    }

    #map-content {
      width: 100%;
      height: 100%;
    }
  </style>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=3eljdozg87AD4Gpov2oDcelZ8FtbaTyr">
  </script>
</head>

<body>
  <div class="container">
    <div class="btn-group">
      <!-- <div class="btn-item" onclick="move(113.262232, 23.154345)">
        <i>+</i>
        <div class="name">部门名称</div>
        <div class="site">部门地点位置</div>
      </div> -->
    </div>
    <div class="map-box">
      <div id="map-content"></div>
    </div>
  </div>




  <script type="text/javascript">

    const POINT = { lng: 116.404, lat: 39.915 }

    var map = new BMapGL.Map("map-content");    // 创建地图实例 
    var point = new BMapGL.Point(POINT.lng, POINT.lat);    // 创建点坐标 
    map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和(地图级别就是缩放)

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var marker = new BMapGL.Marker(point) // 创建红色小图标标注
    map.addOverlay(marker)

    var opts = {
      width: 200, // 信息窗口宽度
      height: 100,// 信息窗口高度
      title: "故宫博物馆",// 信息窗口标题
      message: '这里是故宫'
    }
    var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts) // 创建信息窗口对象 
    marker.addEventListener("click", function () {
      map.openInfoWindow(infoWindow, point); // 开启信息窗口
    });

    // 事件监听 用来在第图上找经纬度然后拷贝，再自己设置一个外部的按钮
    // 把值传入，就可以实现，线下多地址点击地图展示
    var getlocal = function (e) {
      console.log('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
      var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
      console.log('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
    }
    map.addEventListener('click', getlocal);

    // 添加右键菜单
    var menu = new BMapGL.ContextMenu();
    var txtMenuItem = [
      { text: '放大', callback: function () { map.zoomIn(); } },
      { text: '缩小', callback: function () { map.zoomOut(); } }
    ];
    for (var i = 0; i < txtMenuItem.length; i++) {
      menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);

    // 开启路况
    map.setTrafficOn();

    function move(lng, lat) {
      var point = new BMapGL.Point(lng, lat);    // 创建点坐标 
      var marker = new BMapGL.Marker(point) // 创建红色小图标标注
      map.addOverlay(marker)

      var opts = {
        width: 200, // 信息窗口宽度
        height: 100,// 信息窗口高度
        title: "广州",// 信息窗口标题
        message: '这里是广州'
      }
      var infoWindow = new BMapGL.InfoWindow("地址：XX市XX区XX大街XX号XXXXXXX", opts) // 创建信息窗口对象 
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); // 开启信息窗口
      });
      map.panTo(point);
    }

    // 循环添加 按钮控件
    const POINT_LIST = [
      { lng: 113.262232, lat: 23.154345 },
      { lng: 113.262232, lat: 23.154345 }
    ]

    var btn_group = document.getElementsByClassName('btn-group')[0]
    console.log('btn_group', btn_group);


    for (let i = 0; i < POINT_LIST.length; i++) {
      const btn_item_tpl =
        "<div class=\"btn-item\" onclick=\"move(" + POINT_LIST[i].lng + ", " + POINT_LIST[i].lat + ")\">" +
        "<i class=\"iconfont icon-icon_location\"></i>" +
        "<div class=\"name\">部门名称</div>" +
        "<div class=\"site\">部门地点位置</div>" +
        "</div>"
      btn_group.insertAdjacentHTML('beforeend', btn_item_tpl)

      // beforebegin：在 element 元素的前面。
      // afterbegin：在 element 元素的第一个子节点前面。
      // beforeend：在 element 元素的最后一个子节点后面。
      // afterend：在 element 元素的后面。
    }

  </script>
  <!-- 添加控件 -->
  <script src="./add-ctrl.js" type="text/javascript"></script>
</body>

</html>